<template>
  <div class="main">
    <el-button class="btn" type="primary" @click="back">返回上一级</el-button>
    <el-card class="box-card">
      <el-table :data="videolist" style="width: 100%">
        <el-table-column prop="createTime" label="创建日期" width="180">
        </el-table-column>
        <el-table-column prop="imei" label="设备imei码" width="180">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间"> </el-table-column>
        <el-table-column prop="fileName" label="视频地址">
          <template #default="scoped">
            <a :href="scoped.row.fileName">{{ scoped.row.fileName }}</a>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template #default="scoped">
            <el-button type="text" size="small" @click="download(scoped.row)"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pag">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="videoData.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="videoData.pageSize"
          layout="prev, pager, next, sizes ,jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
  
  <script>
import { videoList } from "@/api";
import dayjs from "dayjs";

export default {
  data() {
    return {
      videolist: [],
      videoData: {
        pageNum: 1,
        pageSize: 10,
        imei: "866222060108803",
      },
      total:10
    };
  },
  created() {
    this.videoListFn()
  },
  methods: {
    async videoListFn() {
      const res = await videoList(this.videoData);
      console.log(res);
      this.videolist = res.data.data.resultList;
      this.total = res.data.data.totalRecord
      const baseUrl = "https://zjk.babazhn.com/";
      this.videolist.forEach((item, index, arr) => {
        arr[index].fileName = baseUrl + arr[index].fileName;
        arr[index].createTime = dayjs(arr[index].createTime).format(
          "YYYY-MM-DD"
        );
        arr[index].updateTime = dayjs(arr[index].updateTime).format(
          "YYYY-MM-DD"
        );
      });
    },
    downloadVideo(url) {
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download");
      document.body.appendChild(link);
      link.click();
      return this.$message.success("下载成功");
    },
    download(val) {
      console.log("下载视频");
      this.downloadVideo(val.fileName);
    },
    back() {
      this.$router.go(-1);
    },
    // 每条页数改变监听方法
    handleSizeChange(val) {
      this.videoData.pageSize = val;
      this.videoListFn()
    },
    // 当前页改变监听方法
    handleCurrentChange(val) {
      this.videoData.pageNum = val;
      this.videoListFn()
    },
  },
};
</script>
  
<style scoped lang="scss">
.box-card {
  width: 90%;
  margin: 10px 0 0 50px;
}
.btn {
  margin: 10px 0 0 50px;
}
.pag {
  float: right;
  margin: 20px 26px 20px 0;
  ::v-deep .el-pager .number.active {
    color: #fff;
    background: #007df1;
    cursor: default;
  }
  ::v-deep .btn-prev {
    width: 33px;
    height: 33px;
    text-align: center;
    line-height: 33px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #999999;
    .el-icon {
      margin-left: 4px;
      font-size: 14px;
    }
  }
  ::v-deep .el-select {
    .el-input {
      width: 109px;
      height: 33px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #999999;
      .el-input__inner {
        height: 31px;
      }
    }
  }
  ::v-deep .btn-next {
    width: 33px;
    height: 33px;
    text-align: center;
    line-height: 33px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #999999;
    margin: 0 10px 0 10px;
    .el-icon {
      margin-right: 6px;
      font-size: 14px;
    }
  }
  ::v-deep .number:first-child {
    margin-left: 10px;
  }
  ::v-deep .number {
    width: 33px;
    height: 33px;
    text-align: center;
    line-height: 33px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #999999;
    margin: 0 6px 0 6px;
  }
  ::v-deep .el-pagination__jump {
    height: 33px;
    line-height: 33px;
    margin-left: 0px;
  }
}
</style>